import {CanvasContext} from "@/views/dataScreen/Context";
import './index.less'
import Lines from "@/views/dataScreen/components/EditLine/Lines";
import React from "react";
import {useCanvasByContext} from "@/utils/canvasHook";
const Cmp = (props: { key: any, cmp: any, index: number}) => {
    const contextType = CanvasContext;
    const context: any = useCanvasByContext();
    console.log(contextType,'belongingToAssembly ')
    const {cmp, index} = props;
    const {style} = cmp;
    const {width, height} = style;
    const transform = `rotate(${style.transform}deg)`;
    const zIndex = index;
    const belongingToAssembly = context.belongingToAssembly(index);

    const setSelected = (e: any) => {
        console.log(e)
        if (e.metaKey) {
            console.log(context)
        //     // 把选中的组件填入组件集合
            context.addAndUpdateAssembly(props.index);
        } else {
            console.log(context)
            context.setSelectedCmpIndex(props.index);
        }
    };
    return (<div
        id={cmp.key}
        className={'cmp-main'}
        style={{
            ...style,
            transform,
            zIndex,
        }}
        onClick={setSelected}>
        {belongingToAssembly && <Lines style={{width, height, transform}}/>}
        {/* 组件本身 , 注意如果是文本组件 ，如果处于选中状态，则目前处理是，textarea与这里的div Text重叠*/}
        <div
            className={'cmp'}
            style={{
                width: style.width,
                height: style.height,
            }}>123131
        </div>
    </div>)
}
export default Cmp
